<template>
  <div style="margin-top: 10px">
    <a-table :columns="columns" :data-source="page.list" :pagination="pagination" @change="handleTableChange">
      <template #user_name="{ text }">
        <span>
          <smile-outlined/>
          {{ text }}
        </span>
      </template>

      <template #grade="{ text }">
        <span>
          <a-tag :color="text < 20 ? 'green' : text < 30 ? 'yellow' : 'red'">
            <span v-if="text > 30">
              <fire-outlined/>
            </span>
            {{ text }}
          </a-tag>
        </span>
      </template>

      <template #expect_time="{ text }">
        <span>
          
          <history-outlined/>
          &nbsp;
          {{ text }}
        </span>
      </template>

      <template #email="{ text }">
        <span>
          <mail-outlined/>
          {{ text }}
        </span>
      </template>
      <template #status="{ text }">
        <span>
          <loading-outlined/>
          <b v-if="text === 'arrangement'">&emsp;待安排</b>
          <!-- {{ text }} -->
        </span>
      </template>
      <template #action="{ record }">
        <a @click="checkDescption(record)" v-if="record.status === 'arrangement'">查看详情</a>
      </template>

    </a-table>

  </div>
  <div>
    <a-modal v-model:visible="modalVisible" title="具体描述" @ok="showDrawer()" okText="为其分配出访师">
      <br>
      <b>{{ currUser.description }}</b>
      <br><br>
    </a-modal>
  </div>
  <div class="drawer">
    <a-drawer v-model:visible="visibleDrawer" class="drawer" title="出访分配" placement="right" @close="drawOnclose"
              width="800">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta>
              <template #title>
                <a><b>{{ item.user_name }}&emsp;</b>{{ item.user_id }}</a>
              </template>
              <template #description>
                <p>{{ item.email }}</p>
              </template>
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random"/>
              </template>
            </a-list-item-meta>
            <a @click="exceArrangement(item)">为其选择此导师</a>
          </a-list-item>
        </template>
      </a-list>
      <div>
        <b v-if="data.length === 0">没目前没有空闲的咨询师！ 请新增排班或者通知学生此情况</b>
        <br>
        <a @click="informStudent()">点击通知学生现在已无咨询师资源</a>
        <br>
      </div>
      <br>
      <p>在此为&emsp;{{ currUser.user_id }}&emsp;分配出访咨询师</p>
    </a-drawer>
  </div>

</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {
  post, setLocalToken,
  get,
  del,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
////////////////////////////////////////////

const checkDescption = (record) => {
  currUser.description = record.description;
  currUser.user_id = record.student_id;
  console.log(currUser.description + " curuser " + currUser.user_id)
  modalVisible.value = true;
}

const modalVisible = ref(false);
const currUser = reactive({
  user_id: "",
  description: ""
});

const exceArrangement = (item) => {
  post("/admin/arrange?student=" + currUser.user_id, item).then((res) => {

    visibleDrawer.value = false;
    modalVisible.value = false;
    message.info(res.message)
    getPage(1);
  })
}
const data = ref([]);

const showDrawer = () => {

  get("/admin/getFreeConsultant").then((res) => {
    data.value = res.data;
    console.log(res.data);
  });
  visibleDrawer.value = true;
};


const visibleDrawer = ref(false);
// const drawOnclose = () => {
//   visibleDrawer.value = false;
//   modalVisible.value = true;
// }


const informStudent = () => {
  post("/admin/informStudentOutOfVisitor", currUser).then((res) => {
    message.info(res.message)
  })
  visibleDrawer.value = false;
  modalVisible.value = false;
}


const user = reactive({
  user_id: "",
});


const page = ref({});
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  post("/admin/visit/getList", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

const columns = [
  {
    dataIndex: "visit_id", //
    title: "ID",
    slots: {
      customRender: "visit_id",
    },
  },
  {
    dataIndex: "user_name", //
    title: "学生姓名",
    slots: {
      customRender: "user_name",
    },
  },
  {
    dataIndex: "grade", //
    title: "状况评分",
    slots: {
      customRender: "grade",
    },
  },
  {
    dataIndex: "expect_time", //
    title: "期望时间",
    slots: {
      customRender: "expect_time",
    },
  },
  {
    dataIndex: "email", //
    title: "邮箱",
    slots: {
      customRender: "email",
    },
  },
  {
    dataIndex: "status", //
    title: "状态",
    slots: {
      customRender: "status",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];
</script>

<style>
</style>